<template>
  <a-row class="DigitalPanel">
    <a-col :span="6" :lg="6" class="panel_box">
      <div class="panel_bg">
        <p class="num_tit">碳资产总额</p>
        <div class="num_img_text">
          <div class="icon">
            <img src="@/assets/img/ico1/Folder@3x.png" alt="" />
          </div>
          <div class="text">
            <div class="num">
              <countTo
                v-if="CarbonTransaction"
                class="num"
                :startVal="startVal"
                :endVal="CarbonTransaction.totalTransaction"
                :duration="3000"
              ></countTo>
              <div class="unit">￥</div>
            </div>
            <span class="rate"
              >同比 <i class="iconfont icon-yongdianliang"></i>13 %</span
            >
          </div>
        </div>
      </div>
    </a-col>
    <a-col :span="6" :lg="6" class="panel_box">
      <div class="panel_bg">
        <p class="num_tit">碳配额</p>
        <div class="num_img_text">
          <div class="icon">
            <img src="@/assets/img/ico1/Stat@3x.png" alt="" />
          </div>
          <div class="text">
            <div class="num">
              <countTo
                v-if="CarbonTransaction"
                class="num"
                :startVal="startVal"
                :endVal="CarbonTransaction.quota"
                :duration="3000"
              ></countTo>
              <div class="unit">￥</div>
            </div>
            <span class="rate"
              >同比 <i class="iconfont icon-yongdianliang"></i>4 %</span
            >
          </div>
        </div>
      </div>
    </a-col>
    <a-col :span="6" :lg="6" class="panel_box">
      <div class="panel_bg">
        <p class="num_tit">买入配额</p>
        <div class="num_img_text">
          <div class="icon">
            <img src="@/assets/img/ico1/Wallet@3x.png" alt="" />
          </div>
          <div class="text">
            <div class="num">
              <countTo
                v-if="CarbonTransaction"
                class="num"
                :startVal="startVal"
                :endVal="CarbonTransaction.purchaseQuota"
                :duration="3000"
              ></countTo>

              <div class="unit">￥</div>
            </div>
            <span class="rate"
              >同比 <i class="iconfont icon-yongdianliang"></i> 1.3%</span
            >
          </div>
        </div>
      </div>
    </a-col>
    <a-col :span="6" :lg="6" class="panel_box">
      <div class="panel_bg" style="margin: 0 0 0 2.5px">
        <p class="num_tit">碳排放量</p>
        <div class="num_img_text">
          <div class="icon">
            <img src="@/assets/img/ico1/Stat@3x.png" alt="" />
          </div>
          <div class="text">
            <div class="num">
              <countTo
                v-if="CarbonTransaction"
                class="num"
                :startVal="startVal"
                :endVal="CarbonTransaction.emission"
                :duration="3000"
              ></countTo>
              <div class="unit">万吨</div>
            </div>
            <span class="rate"
              >同比 <i class="iconfont icon-yongdianliang"></i> 21%</span
            >
          </div>
        </div>
      </div>
    </a-col>
  </a-row>
</template>

<script>
import { getCarbonTransaction } from "@/api/api.js";
import countTo from "vue-count-to";
export default {
  name: "DigitalPanel",
  data() {
    return {
      startVal: 0,
      CarbonTransaction: null,
    };
  },
  components:{
      countTo
  },
  mounted() {
    getCarbonTransaction().then((res) => {
      this.CarbonTransaction = res.result;
    });
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.panel_box {
  padding: 0;
  background: #f3f3f3;
}
.DigitalPanel {
  margin-bottom: 5px;
  display: flex;
  flex-direction: row;

  .panel_bg {
    margin: 0 2.5px;
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    .num_tit {
      font-size: 14px;
      font-weight: 600;
      color: #000;
    }
    .num_img_text {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      .icon {
        img {
          width: 50px;
        }
      }
    }
    .text {
      text-align: left;
      margin-right: 40px;
      .rate {
        font-size: 12px;
        color: #999;
      }
      .num {
        display: flex;
        flex-direction: row;
        align-items: center;

        font-size: 26px;
        font-weight: 600;
        margin: 0;
        .unit {
          color: #999;
          margin-left: 10px;
          font-size: 12px;
        }
      }
    }
  }
}
</style>